<template>
    <div>
        <div class="normalPost" v-if="postData.type == 1">
            <div class="header">
                <span class="iconfont iconjiantou2"></span>
                <span class="iconfont iconnew"></span>
                <div
                    @click="handleFollow"
                    class="btnFollow"
                    :class="{
                        unfollow: !postData.has_follow,
                    }"
                >
                    {{ postData.has_follow ? "已关注" : "关注" }}
                </div>
            </div>
            <div class="mainContent">
                <div class="title">{{ postData.title }}</div>
                <div class="info">{{ postData.user.nickname }} 2020-10-11</div>
                <div class="content" v-html="postData.content"></div>
            </div>
        </div>
        <div class="videoPost" v-if="postData.type == 2">
            <video
                poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
                controls
                src="https://video.pearvideo.com/mp4/adshort/20200421/cont-1670293-15098199_adpkg-ad_hd.mp4"
            ></video>
            <div class="info">
                <img src="@/assets/1.jpg" alt="" class="avatar" />
                <div class="name">{{ postData.user.nickname }}</div>
                <div class="btnFollow">关注</div>
            </div>
            <div class="title">{{ postData.title }}</div>
        </div>

        <div class="btns">
            <div
                @click="handleLike"
                class="btn dianzan"
                :class="{
                    hasLike: postData.has_like,
                }"
            >
                <span class="iconfont icondianzan"></span>
                {{ postData.like_length }}
            </div>
            <div class="btn weixin">
                <span class="iconfont iconweixin"></span>
                微信
            </div>
        </div>

        <!-- 这里应该是评论列表 -->
        <h2 class="commentTitle">精彩评论</h2>

        <CommentMain
            :commentData="comment"
            v-for="comment in commentList"
            :key="comment.id"
        />

        <div
            class="btnMoreComment"
            @click="$router.push('/morecomment/' + $route.params.id)"
        >
            更多跟帖
        </div>

        <CommentInput @reloadComment="reloadComment" />
    </div>
</template>

<script>
    import CommentMain from "../components/Comment/Main";
    import CommentInput from "../components/Comment/Input";
    export default {
        data() {
            return {
                postData: {},
                commentList: [],
            };
        },
        components: {
            CommentMain,
            CommentInput,
        },
        created() {
            this.$axios({
                url: "/post/" + this.$route.params.id,
            }).then((res) => {
                console.log(res.data);
                this.postData = res.data.data;
            });

            this.reloadComment();
        },
        methods: {
            reloadComment() {
                this.$axios({
                    url: "/post_comment/" + this.$route.params.id,
                }).then((res) => {
                    // 如果评论多于三条就截断
                    if (res.data.data.length > 3) {
                        res.data.data.length = 3;
                    }
                    this.commentList = res.data.data;
                });
            },
            handleFollow() {
                // 这里是关注按钮的点击事件,
                // 但是同一个按钮, 可能是关注也可能是取消关注
                // 后台要求发送的 api 地址不一样, 所以要进行判断后再发送
                // 用户 Id 可以通过 this.postData.user.id 获取
                if (this.postData.has_follow) {
                    // 取消
                    this.$axios({
                        url: "/user_unfollow/" + this.postData.user.id,
                    }).then((res) => {
                        console.log(res.data);
                        this.postData.has_follow = false;
                    });
                } else {
                    // 关注
                    this.$axios({
                        url: "/user_follows/" + this.postData.user.id,
                    }).then((res) => {
                        console.log(res.data);
                        this.postData.has_follow = true;
                    });
                }
            },
            handleLike() {
                this.$axios({
                    url: "/post_like/" + this.$route.params.id,
                }).then((res) => {
                    console.log(res.data);
                    // 这个点赞接口, 只有一个, 无论取消还是实施点赞,都是一个地址
                    // 请求完毕的时候就可以根据相应数据, 来决定页面的显示
                    // 这里取消成功或者点赞成功
                    // 跟关注一样, 都有两种选择,
                    // 1. 直接发送请求, 重新获取数据
                    // 2. 可以直接改数据
                    if (res.data.message == "取消成功") {
                        this.postData.has_like = false;
                        this.postData.like_length--;
                        this.$toast("取消成功");
                    }
                    if (res.data.message == "点赞成功") {
                        this.postData.has_like = true;
                        this.postData.like_length++;
                        this.$toast.success("点赞成功");
                    }
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .commentTitle {
        text-align: center;
        font-size: 18 /360 * 100vw;
        font-weight: 700;
        padding: 20 /360 * 100vw;
    }
    .btnMoreComment {
        text-align: center;
        font-size: 18 /360 * 100vw;
        width: 121 /360 * 100vw;
        height: 30 /360 * 100vw;
        line-height: 30 /360 * 100vw;
        border: 1px solid #888;
        margin: 30 /360 * 100vw auto;
        margin-bottom: 80 /360 * 100vw;
        border-radius: 15 /360 * 100vw;
        color: #666;
    }
    .normalPost {
        .header {
            display: flex;
            padding: 0 20 /360 * 100vw;
            align-items: center;
            .iconnew {
                flex-grow: 1;
                font-size: 54 /360 * 100vw;
                padding-left: 10 /360 * 100vw;
            }
            .btnFollow {
                font-size: 16 /360 * 100vw;
                border: 1px solid #888;
                height: 30 /360 * 100vw;
                line-height: 30 /360 * 100vw;
                padding: 0 16 /360 * 100vw;
                border-radius: 15 /360 * 100vw;
                &.unfollow {
                    border-color: red;
                    background: red;
                    color: #fff;
                }
            }
        }
        .mainContent {
            padding: 0 20 /360 * 100vw;
            .title {
                font-size: 20 /360 * 100vw;
                font-weight: 700;
            }
            .info {
                font-size: 14 /360 * 100vw;
                color: #888;
                padding-top: 10 /360 * 100vw;
            }
            .content {
                /deep/ img {
                    max-width: 100%;
                }
            }
        }
    }
    .videoPost {
        video {
            width: 100%;
        }
        .info {
            padding: 10 /360 * 100vw;
            display: flex;
            align-items: center;
            .avatar {
                width: 40 /360 * 100vw;
                height: 40 /360 * 100vw;
                object-fit: cover;
                border-radius: 50%;
            }
            .name {
                flex-grow: 1;
                padding-left: 10 /360 * 100vw;
                color: #888;
            }
            .btnFollow {
                font-size: 16 /360 * 100vw;
                border: 1px solid #888;
                height: 30 /360 * 100vw;
                line-height: 30 /360 * 100vw;
                padding: 0 16 /360 * 100vw;
                border-radius: 15 /360 * 100vw;
            }
        }
        .title {
            padding: 10 /360 * 100vw;
            font-size: 16 /360 * 100vw;
            color: #333;
        }
    }
    .btns {
        display: flex;
        justify-content: space-evenly;
        padding: 20 /360 * 100vw;
        border-bottom: 4 /360 * 100vw solid #e4e4e4;
        .btn {
            border: 1px solid #888;
            font-size: 16 /360 * 100vw;
            height: 30 /360 * 100vw;
            line-height: 30 /360 * 100vw;
            padding: 0 14 /360 * 100vw;
            border-radius: 15 /360 * 100vw;
            .iconfont {
                padding-right: 2px;
            }
            .iconweixin {
                color: #00c800;
            }
            &.hasLike {
                color: red;
            }
        }
    }
</style>